<template>
  <div>
    <Header :left="true" leftText="返回" title="协助人选择" />
    <div>
      <van-sticky :offset-top="70">
        <div style="background-color: #FFFFFF;">
          <van-search
            v-model="searchValue"
            @keydown.enter.native="onSearch"
            show-action
            placeholder="请输人员姓名或工号"
          >
            <template #action>
              <div @click="onSearch" style="width:50px;text-align:center;">
                搜索
              </div>
            </template>
          </van-search>
          <van-divider style="color:#1076C0; border-color:#1076C0;margin-top:-10px;">已选</van-divider>
        </div>
      </van-sticky>
      <!-- 数据展示区 -->
      <div div style="height:700px;">
        <!-- 已选列表 -->
        <div style="background-color: #F7F8F9;height:32%;">
          <div class="selectdTextScroll">
            <div v-for="(item, index) in selecteditems" :key="item.userKey">
              <div class="divStyle">
                <van-row style="margin-top:2px;">
                  <van-col span="19" style="font-weight:bold;color:#A9A9A9; margin-left:20px;">{{
                    item.userName
                  }}</van-col>
                  <van-col span="2" style="color:#A9A9A9;"
                    ><van-image
                      @click="selected(index)"
                      width="25px"
                      height="25px"
                      style="margin-left:10px;"
                      src="assets/reduce.png"
                  /></van-col>
                </van-row>
                <van-divider />
              </div>
            </div>
          </div>
        </div>
        <!-- 已选列表结束 -->

        <!-- 未选列表 -->
        <van-divider style="color:#FF8C00; margin-top:5px;">未选</van-divider>
        <div style="background-color: #F7F8F9;height:60%;margin-top:-10px;">
          <div class="noSelectTextScroll">
            <div v-for="(item, index) in items" :key="item.userKey">
              <div class="divStyle">
                <van-row style="margin-top:2px;">
                  <van-col span="19" style="font-weight:bold;color:#A9A9A9; margin-left:20px;">{{
                    item.userName
                  }}</van-col>
                  <van-col span="2" style="color:#A9A9A9;"
                    ><van-image
                      @click="noSelect(index)"
                      width="25px"
                      height="25px"
                      style="margin-left:10px;"
                      src="assets/add.png"
                  /></van-col>
                </van-row>
                <van-divider />
              </div>
            </div>
          </div>
        </div>
        <!-- 未选列表结束 -->
      </div>
      <!-- 数据展示区结束 -->
    </div>
    <van-button :block="true" v-show="btnShow" class="buttonRight" @click="confirm" type="primary" text="确认" />
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Search,
  Sticky,
  Toast,
  Dialog,
} from 'vant'
Vue.use(Cell)
Vue.use(CellGroup)

Vue.use(Button, Dialog)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Divider)
Vue.use(Checkbox)
Vue.use(Pagination)
Vue.use(Search)
Vue.use(Sticky)
import { _httpClient } from '@/libs/api'
import Header from '@/components/header.vue'
import { storage, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/utils'
export default {
  components: { Button, Header, Icon, CellGroup, Cell, Field, Col, Row, Search, Sticky },

  data() {
    return {
      recordId: '', //前一界面传递维修单ID
      btnShow: true,
      pageParam: { name: '' },
      chosenContactId: '1',
      screenWidth: 0,
      searchValue: '',
      active: 2,
      currentPage: 1,
      fileUrl: '',
      items: [
        //未选择人员列表
        // { id: 1, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 2, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 3, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 4, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 5, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 6, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 7, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 8, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 9, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 10, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 11, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 12, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 13, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 14, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 15, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 16, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 17, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 18, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 19, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 21, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 22, userName: '用户22', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
      ],
      selecteditems: [
        //已选择人员列表
        //     { id: 1, userCode: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        //     { id: 2, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        //     { id: 3, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        //     { id: 4, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        //     { id: 5, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        //     { id: 6, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        //     { id: 7, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        //     { id: 8, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        //     { id: 9, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        //     { id: 10, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
      ],
    }
  },
  created: function() {
    let oldHight = api.winWidth
    this.screenWidth = oldHight
    //获取页面传递参数
    let receiveData = api.pageParam.helpUser
    this.recordId = api.pageParam.recordId
    if (receiveData != null && receiveData.length > 0) {
      for (let i = 0; i < receiveData.length; i++) {
        let data = {
          userKey: receiveData[i].userKey,
          userAccound: receiveData[i].userCode,
          userName: receiveData[i].userName,
        }
        this.selecteditems.push(data)
      }
    }
    //查询人员信息
    this.onSearch()
  },
  mounted: function() {
    const oldHight = api.winHeight
    addEventListener('resize', () => {
      let newHight = api.winHeight
      this.btnShow = newHight < oldHight ? false : true
    })
  },
  methods: {
    //搜索
    async onSearch() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/user/userInfo/list', {
          body: { userAccound: _this.searchValue },
        })

        if (res.code === 200) {
          Toast.clear()
          _this.items = res.rows
          //判断是否存在已选择用户
          if (_this.selecteditems.length > 0) {
            //移除查询结果中的已存在用户
            for (let i = 0; i < _this.selecteditems.length; i++) {
              for (let j = 0; j < _this.items.length; j++) {
                if (_this.selecteditems[i].userKey == _this.items[j].userKey) {
                  _this.items.splice(j, 1)
                  break
                }
              }
            }
          }
        } else {
          alert(res.msg)
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },

    //未选中列表点击选中事件
    noSelect(i) {
      //选中数据，从未选择列表中移除
      this.selecteditems.unshift(this.items[i])
      this.items.splice(i, 1)
    },

    //已选择列表点击选择事件
    selected(i) {
      //选中数据，从选择列表中移除
      this.items.unshift(this.selecteditems[i])
      this.selecteditems.splice(i, 1)
    },

    //确认
    confirm() {
      //判断是否选择数据
      if (this.selecteditems.length == 0) {
        Dialog.confirm({
          title: '提示',
                        theme: 'round-button',
          message: '当前未选择用户数据，是否直接返回?',
        })
          .then(() => {
            //点击确定，继续执行后续操作
            //删除当前维修单协助人数据
            this.deleteHelpUser()
          })
          .catch(() => {})
      } else {
        //删除当前维修单协助人数据
        this.deleteHelpUser()
        //新增维修单协助人信息
        this.addHelpUser()
      }

      //数据整合
      let addData = []
      for (let i = 0; i < this.selecteditems.length; i++) {
        let data = {
          siteKey: this.selecteditems[i].siteKey,
          recordId: this.recordId,
          userCode: this.selecteditems[i].userAccound,
          userName: this.selecteditems[i].userName,
        }
        addData.push(data)
      }
      //关闭当前窗口
      api.sendEvent({
        name: 'resultUser',
        extra: {
          resultUser: addData,
        },
      })
      api.closeWin()
    },

    //删除协助用户数据信息
    async deleteHelpUser() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/repair/repairInfo/deleteHelpUserById', {
          body: { recordId: _this.recordId },
        })

        if (res.code === 200) {
          Toast.clear()
        } else {
          alert(res.msg)
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },

    //新增协助用户数据信息
    async addHelpUser() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })

      //数据整合
      let addData = []
      for (let i = 0; i < _this.selecteditems.length; i++) {
        let data = {
          siteKey: _this.selecteditems[i].siteKey,
          recordId: _this.recordId,
          userCode: _this.selecteditems[i].userAccound,
          userName: _this.selecteditems[i].userName,
        }
        addData.push(data)
      }
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/repair/repairInfo/insertHelpUser', {
          body: { list: addData },
        })

        if (res.code === 200) {
          Toast.clear()
        } else {
          alert(res.msg)
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
  },
}
</script>
<style>
body {
  background-color: White;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}
.buttonRight {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.labelStyle {
  width: 60px;
  height: 20px;
  background-color: #ff9933;
  color: white;
  float: right;
  font-size: 13px;
  text-align: center;
  margin-top: -5px;
  line-height: 20px;
}
.message {
  font-size: 20px;
  margin-top: 0px;
  margin-left: -10px;
  font-weight: bold;
}
.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.selectdTextScroll {
  display: inline-block;
  position: fixed;
  top: 9rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 0.5rem;
  height: 208px;
  z-index: 1;
}
.noSelectTextScroll {
  display: inline-block;
  position: fixed;
  top: 25.5rem;
  bottom: -20px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 6.5rem;
  z-index: 1;
}
</style>
